<template>
  <div>
    <div class="top">
      <img src="../../../static/market/dou.png" alt="">
      <span>企鹅余额：100</span>
    </div>
    <div class="zhanwei"></div>
    <div class="qbDetails">
      <div>查看明细</div>
      <ul>
        <li :class="['0' == index ? 'active' : '']" @click="changeActive('0')">最近一星期</li>
        <li :class="['1' == index ? 'active' : '']" @click="changeActive('1')">最近三个月</li>
        <li :class="['2' == index ? 'active' : '']" @click="changeActive('2')">最近一年</li>
      </ul>
    </div>
    <ul class="list" v-if="list.length">
      <li>
        <div>
          <div class="name">购买集市《谁的青春不迷茫》</div>
          <div class="time">2018-10-04 17:55</div>
        </div>
        <div style="width: 100rpx;text-align: right;">-100</div>
      </li>
      <li>
        <div>
          <div class="name">购买二手书《平视姚明》</div>
          <div class="time">2018-10-03 17:55</div>
        </div>
        <div style="width: 100rpx;text-align: right;">+10</div>
      </li>
    </ul>
    <div class="hasnolist" v-else>
      暂无交易明细
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      index: '0',
      list: [],
      page: 1,
      recentDays: 7
    }
  },
  onLoad() {
    this.getEgg()
  },
  methods: {
    getEgg() {
      let data = {
        page: this.page,
        pageSize: 8,
        recentDays: this.recentDays,
        headerUserToken: "wx-08db1ce041d943d0acd52bd8ab8b4e63"
      }
      console.log(data)
      this.$http.get('/customer/wx/egg', data).then(res => {
        this.list = this.list.concat(res.data)
        this.page++
      })
    },
    changeActive(index) {
      if (index == '0') {
        this.recentDays = 7
      } else if (index == '1') {
        this.recentDays = 90
      } else {
        this.recentDays = 365
      }
      this.index = index
      this.list = []
      this.page = 1
      this.getEgg()
    }
  }
}
</script>
<style lang="scss" scoped>
.zhanwei {
    height: 18rpx;
    background-color: #eee;
}
.top {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 80rpx;
    font-size: 16px;
    img {
        margin: 0 20rpx;
        width: 28rpx;
        height: 38rpx;
    }
}
.qbDetails {
    padding: 0 18rpx 30rpx;
    font-size: 28rpx;
    & > div {
        line-height: 80rpx;
        color: #666;
    }
    ul {
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
            width: 190rpx;
            text-align: center;
            line-height: 56rpx;
            color: #333;
            border: 1rpx solid #333;
            border-radius: 10rpx;
        }
        .active {
            color: #fff;
            background-color: #c78650;
            border: 1rpx solid #c78650;
        }
    }
}
.hasnolist {
    text-align: center;
    margin-top: 200rpx;
    font-size: 28rpx;
    color: #666;
}
.list {
    padding: 18rpx;
    li {
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #666;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;
        .name {
            line-height: 40rpx;
        }
        .time {
            line-height: 30rpx;
            font-size: 24rpx;
        }
    }
}
</style>

